<template>
  <!-- 导入上面的组件，把你们的开奖号码套进去就行 -->
  <div class="winning-box" v-if="numbers.length > 1">
    <div class="periods">{{ periods }}期开奖结果</div>
    <div class="box result-box">
      <div class="item-box" v-for="(item, index) in numbers" :key="index">
        <div class="ball-front column-center">
          <div :class="[item.className, item.lastNumclassName]" class="number all-center">
            {{ item.num }}
          </div>
          <div class="animal-sign all-center" :class="[item.animalClass]">{{ item.animal }}</div>
        </div>
      </div>
      <arrowAnimate
        ref="arrowAnimate"
        color="#fff"
        :style="{ 'margin-left': '0.1rem' }"
        @click="openHistoryPopup"
      />
    </div>
  </div>
</template>

<script>
import arrowAnimate from '@components/arrow-animate.vue'
import { numberMap } from '@config/markSixConfig.js'
import { mapState } from 'pinia'
import { GAME_STATUS_CODE } from '@/enum'
import { useGameStore } from '@/stores/game'
import { findHistoryPage } from '@/api'

export default {
  name: 'win-number',
  components: { arrowAnimate },
  props: {},
  created() {
    this.fetchHistory()
  },
  data() {
    return {
      numbers: [], //开奖号码
      winData: {},
    }
  },
  computed: {
    ...mapState(useGameStore, {
      drawingStatus: (state) => state.drawingStatus,
      currentGame: (state) => state.currentGame,
    }),
  },
  watch: {
    drawingStatus: {
      handler(newValue) {
        //  说明已经开奖, 要从历史接口更新开奖数据
        if (newValue.code === GAME_STATUS_CODE.kaijiang.code) {
          this.fetchHistory()
        }
      },
      deep: true,
    },
  },
  methods: {
    // 请求开奖记录
    async fetchHistory() {
      let query = {
        current: 1,
        size: 10,
        lotteryCode: this.currentGame,
      }
      const res = await findHistoryPage(query)
      this.winData = res.data.records[0]
      this.periods = this.winData.periodsNumber
      this.numbers = this.handleRenderData(this.winData.drawingResult) //最新一期开奖记录
    },

    // 处理成渲染需要的格式
    handleRenderData(numStr) {
      if (!numStr) return []
      const list = numStr.split(',')
      const numArr = list.map((num, index) => {
        const obj = {
          num: num,
          animal: '',
          className: '',
          animalClass: '',
          lastNumclassName: '',
        }
        obj.className = numberMap[num].color
        obj.animalClass = numberMap[num].color + '-animal'
        obj.animal = numberMap[num].animal
        if (index === list.length - 1) obj.lastNumclassName = obj.className + '-bg'
        return obj
      })
      return numArr
    },

    openHistoryPopup() {
      this.$refs.arrowAnimate.rotateArrow()
      this.$emit('openHistoryPopup')
    },

    // 更新数据
    updateList(list) {
      this.winList = list
    },
  },
}
</script>

<style scoped lang="less">
//@import url('./winNumber.less');
.minx-bg {
  border: none;
  background-size: contain;
  color: #fff;
}

.winning-box {
  .red {
    color: rgba(255, 92, 82, 1);
    border: 2px solid rgba(255, 146, 146, 1);
    border-radius: 50%;
  }

  .red-animal {
    color: #ff3e3e;
  }

  .blue-animal {
    color: rgba(105, 80, 255, 1);
  }

  .green-animal {
    color: #11b548;
  }

  .red-bg {
    background: url('@/assets/img/xglhc/red.png') no-repeat;
    .minx-bg();
  }

  .blue {
    color: rgba(105, 80, 255, 1);
    border: 2px solid rgba(145, 128, 246, 1);
    border-radius: 50%;
  }
  .blue-bg {
    background: url('@/assets/img/xglhc/blue.png') no-repeat;
    .minx-bg();
  }

  .green {
    color: rgba(47, 151, 88, 1);
    border: 2px solid rgba(149, 236, 183, 1);
    border-radius: 50%;
  }
  .green-bg {
    background: url('@/assets/img/xglhc/green.png') no-repeat;
    .minx-bg();
  }

  .item-box:nth-last-of-type(1) {
    .animal-sign {
      color: #fff !important;
    }
  }
}

.winning-box {
  position: relative;
  width: 100%;

  .periods {
    height: 20px;
    margin-bottom: 8px;
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    font-family: 'DIN';
  }

  .rotated {
    transform: rotateY(180deg);
  }

  .box {
    display: flex;

    .item-box:nth-last-of-type(2) {
      margin-right: 0;
    }
  }

  .item-box {
    height: 30px;
    margin-right: 4px;
    cursor: pointer;

    .ball-front {
      backface-visibility: hidden;

      .animal-sign {
        position: absolute;
        bottom: -4px;
        font-size: 10px;
        font-weight: 600;
        text-shadow:
          1px -1px 0px white,
          1px 1px 0px white,
          -1px 1px 0px white;
      }
    }

    .arrow {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
}
.result-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.number {
  font-size: 14px;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-weight: 600;
  box-sizing: border-box;
  background: radial-gradient(72.92% 72.92% at 40.22% 18.75%, #ffffff 0%, #f3e8e8 70.26%, #fcf4f4 100%);
}
</style>
